<!DOCTYPE html>
<html>
<head>
  <title>Electrostatic Image Charge Diagram</title>
</head>
<body>
  <canvas id="physicsCanvas" width="500" height="420"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinates and scale
    const cx = canvas.width / 2;
    const cy = 200; // Vertical center for the horizontal axis
    const a = 110; // distance 'a' in pixels
    const chargeRadius = 4;
    const arrowLength = 80;
    
    // Set common styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // --- Draw Vertical Conductor (S) ---
    const topY = 40;
    const bottomY = 360;
    ctx.beginPath();
    ctx.moveTo(cx, topY);
    ctx.lineTo(cx, bottomY);
    ctx.stroke();

    // Tick marks on the vertical axis
    ctx.lineWidth = 1;
    for (let i = -4; i <= 4; i++) {
        if (i === 0) continue;
        const yPos = cy + i * 30;
        ctx.beginPath();
        ctx.moveTo(cx - 5, yPos);
        ctx.lineTo(cx + 5, yPos);
        ctx.stroke();
    }
    ctx.lineWidth = 1.5;

    // --- Draw Horizontal Dashed Axis ---
    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(cx - a - 50, cy);
    ctx.lineTo(cx + a + arrowLength + 30, cy);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // --- Draw Charges ---
    // The image shows stylized characters for Q and Q'. For clarity and adherence to standard notation
    // and the problem description, standard Q and Q' are drawn. The dot for the charge is part of the character in the original.
    // Here we draw a separate point for the charge's location.

    // Charge Q on the right
    ctx.beginPath();
    ctx.arc(cx + a, cy, chargeRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Image Charge Q' on the left
    ctx.beginPath();
    ctx.arc(cx - a, cy, chargeRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw Force Vector (F) ---
    const arrowStartX = cx + a;
    const arrowEndX = arrowStartX + arrowLength;
    ctx.beginPath();
    ctx.moveTo(arrowStartX, cy);
    ctx.lineTo(arrowEndX, cy);
    ctx.lineWidth = 2;
    ctx.stroke();

    // Arrow head
    const headlen = 12;
    const angle = 0; // Horizontal arrow
    ctx.beginPath();
    ctx.moveTo(arrowEndX, cy);
    ctx.lineTo(arrowEndX - headlen * Math.cos(angle - Math.PI / 6), cy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(arrowEndX, cy);
    ctx.lineTo(arrowEndX - headlen * Math.cos(angle + Math.PI / 6), cy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
    ctx.lineWidth = 1.5;

    // --- Draw Labels ---
    ctx.fillStyle = 'black';
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'center';
    
    // Label Q'
    // The original image shows a stylized prime/tilde. We use Q' as per the problem description.
    ctx.textBaseline = 'bottom';
    // Draw the tilde/prime as seen in the image for closer resemblance
    ctx.fillText('Q', cx - a, cy - 10);
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(cx - a - 6, cy - 38);
    ctx.quadraticCurveTo(cx - a, cy - 42, cx - a + 6, cy - 38);
    ctx.stroke();
    ctx.restore();


    // Label Q
    // The Q in the original image also has a flourish. For simplicity and clarity, we draw a standard Q.
    ctx.fillText('Q', cx + a, cy - 10);
    
    // Label F
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.font = 'italic bold 24px "Times New Roman"';
    ctx.fillText('F', cx + a + arrowLength + 5, cy);

    // Labels 'a'
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('a', cx + a / 2, cy + 8);
    ctx.fillText('a', cx - a / 2, cy + 8);

    // Labels σ and S
    ctx.font = '22px "Times New Roman"';
    ctx.textBaseline = 'bottom';
    ctx.fillText('σ', cx, topY - 5);
    ctx.textBaseline = 'top';
    ctx.fillText('S', cx, bottomY + 5);

    // Chinese labels
    ctx.font = '20px "SimSun", "Songti SC"';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('导体', cx - 25, cy + 90);

    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('图 1', cx, bottomY + 25);

  </script>
</body>
</html>